<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的信息</title>
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/mymodel.css" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/my.css" />
  </head>
  <body>
    <!-- 主体 -->
    <div class="main">
      <!-- 头部 -->
      <div class="my_header">
        <a href="#">
          <div class="info">
            <div class="user">
              <img
                src="http://cba.itlike.com/public/mweb/static/default-avatar.png"
                alt=""
              />
            </div>
            <div class="text">
              <div class="username">未登录</div>
              <div class="login_tips">点击登录账号</div>
            </div>
          </div>
        </a>
      </div>
      <!-- 钱包 -->
      <div class="my_asset">
        <div class="left">
          <div class="left_item">
            <div class="value">--</div>
            <p>账户余额</p>
          </div>
          <div class="left_item">
            <div class="value">--</div>
            <p>积分</p>
          </div>
          <div class="left_item">
            <div class="value">--</div>
            <p>优惠券</p>
          </div>
        </div>
        <div class="right">
          <a href="#">
            <i class="iconfont icon-qianbao-"></i>
            <p>我的钱包</p>
          </a>
        </div>
      </div>
      <!-- 订单 -->
      <div class="order">
        <a href="#">
          <i class="iconfont icon-dingdan"></i>
          <p>全部订单</p>
        </a>
        <a href="#">
          <i class="iconfont icon-qianbao"></i>
          <p>待支付</p>
        </a>
        <a href="#">
          <i class="iconfont icon-wuliuqiache"></i>
          <p>待发货</p>
        </a>
        <a href="#">
          <i class="iconfont icon-daishouhuo"></i>
          <p>待收货</p>
        </a>
      </div>
      <!-- 服务 -->
      <div class="my-service">
        <h3>我的服务</h3>
        <div class="content">
          <a href="#">
            <div class="icon">
              <i class="iconfont icon-dizhi1"></i>
            </div>
            <p>收货地址</p>
          </a>
          <a href="#">
            <div class="icon">
              <i class="iconfont icon-liwuhuodong"></i>
            </div>
            <p>领券中心</p>
          </a>
          <a href="#">
            <div class="icon">
              <i class="iconfont icon-weibiaoti2fuzhi02"></i>
            </div>
            <p>优惠券</p>
          </a>
          <a href="#">
            <div class="icon">
              <i class="iconfont icon-wodebangzhuzhongxin"></i>
            </div>
            <p>我的帮助</p>
          </a>
          <a href="#">
            <div class="icon">
              <i class="iconfont icon-meiyuan"></i>
            </div>
            <p>我的积分</p>
          </a>
          <a href="#">
            <div class="icon">
              <i class="iconfont icon-qian1"></i>
            </div>
            <p>退换/售后</p>
          </a>
        </div>
      </div>

      <!-- 退出登录 -->
      <div class="login_out">
        <span>退出登录</span>
      </div>
    </div>
    <!-- 模态框提示 -->
    <div class="modal fade" id="modal">
      <div class="modal-dialog modal-lg modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">友情提示</h5>
          </div>
          <div class="txt">您确定要退出登录吗?</div>
          <div class="fot">
            <button type="button" class="btn_1" data-bs-dismiss="modal">
              取消
            </button>
            <button
              type="button"
              class="btn_1"
              id="submit"
              style="color: rgb(0, 122, 255)"
            >
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <footer>
      <a href="./index 1.html" class="link1">
        <i class="iconfont icon-shouye-zhihui"></i>
        <p>首页</p>
      </a>
      <a href="./classify.html" class="link2">
        <i class="iconfont icon-fenlei"></i>
        <p>分类</p>
      </a>
      <a href="./shop.html" class="link3">
        <i class="iconfont icon-31gouwuche"></i>
        <p>购物车</p>
      </a>
      <a href="./my.html" class="active link4">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
      </a>
    </footer>

    <!-- <script src="./js/common.js"></script> -->
    <script src="./css/bootstrap/bootstrap.min.js"></script>
    <script src="./js/my.js"></script>
    <script>
      // 用户名
      function renderPhone() {
        const phone = localStorage.getItem('mobile')
        const reg = /^(\d{3})\d{4}(\d{4})$/
        // console.log(phone.replace(reg, '$1****$2'))
        const res = phone.replace(reg, '$1****$2')
        document.querySelector('.text .username').innerHTML = res
          ? res
          : '未登录'
        document.querySelector('.text .login_tips').innerHTML = res
          ? res
          : '点击登录账号'
      }
      // 检测是否存在token
      if (localStorage.getItem('user-token')) {
        renderPhone()
        // 点击退出
        document.querySelector('.login_out').style.display = 'block'
        const modalBox = document.querySelector('#modal')
        const modal = new bootstrap.Modal(modalBox)
        document
          .querySelector('.login_out')
          .addEventListener('click', function () {
            modal.show()

            // 获取确定按钮
            const submit = document.querySelector('#submit')
            if (submit) {
              submit.addEventListener('click', function () {
                localStorage.removeItem('user-token')
                localStorage.removeItem('user-key')
                localStorage.removeItem('mobile')
                modal.hide()
                document.querySelector('.text .username').innerHTML = '未登录'
                document.querySelector('.text .login_tips').innerHTML =
                  '点击登录账号'
              })
            }
          })
      }
    </script>
  </body>
</html>
